<template>
    <div class="zs-table-page-container" v-loading="loading">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="biProjectCode" filterable class="zs-select-md zs-space-right-sm" placeholder="项目名称"
                    @change="changeProject()">
                    <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
                        :value="item.biProjectCode" />
                </el-select>
                <el-select v-model="brandname" filterable class="zs-select-md zs-space-right-sm" placeholder="品牌"
                    @change="getContractList()">
                    <el-option v-for="(item, index) in brandList" :key="index" :label="item" :value="item" />
                </el-select>
                <el-select v-model="contractscode" clearable filterable multiple collapse-tags collapse-tags-tooltip
                    class="zs-select-md zs-space-right-sm" placeholder="铺位编号">
                    <el-option v-for="(item, index) in contractsCodeList" :key="index" :label="item" :value="item" />
                </el-select>
                <el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
                    <template #reference>
                        <el-button class="zs-btn-square-solid"
                            :class="{ 'zs-btn-square-solid-active': startDateSelect || endDateSelect }">
                            <el-icon>
                                <MoreFilled />
                            </el-icon>
                        </el-button>
                    </template>
                    <template #default>
                        <div>
                            <el-date-picker class="zs-space-right-sm" v-model="startDateSelect" :type="pickerDate"
                                placeholder="开始日期" :clearable="false" :value-format="valueFormat" :teleported="false"
                                @change="changeDate()" />
                            <el-date-picker class="zs-space-right-sm" v-model="endDateSelect" :type="pickerDate"
                                placeholder="结束日期" :clearable="false" :value-format="valueFormat" :teleported="false"
                                @change="changeDate()" />
                        </div>
                    </template>
                </el-popover>
                <el-button class="zs-btn-plain" @click="getData()">
                    查询
                </el-button>
            </span>
            <span class="zs-layout-flex-row">
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '日' }" @click="changeTab('日')">
                    按日
                </div>
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '月' }" @click="changeTab('月')">
                    按月
                </div>
                <div class="db-btn zs-space-right" :class="{ 'db-btn-primary': curTab == '年' }" @click="changeTab('年')">按年
                </div>
                <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出</el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" v-if="curTab == '日'">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="theDate" label="日期" width="120" :align="'left'"></el-table-column>
                <el-table-column prop="shopNum" label="铺位编号" width="120" :align="'left'"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="netLeaseArea" label="租赁面积" width="100"
                    :align="'right'"></el-table-column>
                <el-table-column label="销售额" :align="'right'" width="120">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.yearmonthSalesYuan)" placement="top">
                            <span>{{ toThousands(scope.row.salesVolume) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="环比上周" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>同比上周</div>
                            <el-popover placement="bottom" :width="320" trigger="hover" content="（销售额-上周同日销售额）/上周同日销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.salesYoyType == '-' ? '-' : `${scope.row.salesYoyType}%` }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="销售监控" :align="'center'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-center">
                            <div>销售监控</div>
                            <el-popover placement="bottom" :width="300" trigger="hover">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                                <div>当日销售/上月日均销售-1>50%: 超高</div>
                                <div>当日销售/上月日均销售-1&lt;-50%: 超低</div>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        <span :class="{ 'zs-text-red': scope.row.salesMonitoringFlag == '1' }">{{
                            scope.row.monitoringDiscountAnnualType
                        }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="rentTypeDesc" label="租金架构" min-width="120" :align="'center'"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="cashType" label="销售设备" min-width="120"
                    :align="'center'"></el-table-column>
                <el-table-column prop="passengerFlowEqu" label="客流设备" width="120" :align="'center'"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="客流量" :align="'right'" width="120">
                    <template #default="scope">
                        {{ toThousands(scope.row.passengerFlow) }}
                    </template>
                </el-table-column>
                <el-table-column prop="contractscode" label="合同编号" :align="'center'" width="120"></el-table-column>
                <el-table-column prop="contractStart" label="合同开始" :align="'center'" width="120"></el-table-column>
                <el-table-column prop="contractEnd" label="合同结束" :align="'center'" width="120"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" min-width="160" :align="'left'"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="brandname" label="品牌名称" min-width="160" :align="'left'"
                    show-overflow-tooltip></el-table-column>


                <!-- <el-table-column label="同比上周" :align="'right'">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>同比上周</div>
                            <el-popover placement="bottom" :width="320" trigger="hover" content="（客流量-上周同日客流量）/上周同日客流量">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.footfallYoySqmType == '-' ? '-' : `${scope.row.footfallYoySqmType}%` }}
                    </template>
                </el-table-column> -->

                <!-- <el-table-column prop="weekSalesRentalcost" label="星期" :align="'center'"></el-table-column> -->
                <!-- <el-table-column prop="datelabelMomAvgsales" label="日期标签" :align="'center'"></el-table-column> -->
            </el-table>
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" v-if="curTab == '月'">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="theDate" label="日期" :align="'left'"></el-table-column>
                <el-table-column prop="shopNum" label="铺位编号" width="120" :align="'left'"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="netLeaseArea" label="租赁面积" width="120"
                    :align="'right'"></el-table-column>
                <el-table-column label="销售额" :align="'right'">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.yearmonthSalesYuan)" placement="top">
                            <span>{{ toThousands(scope.row.salesVolume) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="日均销售" :align="'right'" width="100">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>日均销售</div>
                            <el-popover placement="bottom" :width="120" trigger="hover" content="销售额/经营天数">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ toThousands(scope.row.weekSalesRentalcost) }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="同比上年" :align="'right'" width="100">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>同比上年</div>
                            <el-popover placement="bottom" :width="360" trigger="hover" content="（日均销售-上年同月日均销售）/上年同月日均销售">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.yoyAnnualAverageSales == '-' ? '-' : `${scope.row.yoyAnnualAverageSales}%` }}
                    </template>
                </el-table-column>

                <el-table-column label="月坪效" :align="'right'" :width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>月坪效</div>
                            <el-popover placement="bottom" :width="380" trigger="hover" content="（销售额/经营天数*30）/月末起租面积">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ toThousands(scope.row.avgFlatEffectMonth) }}
                    </template>
                </el-table-column>
                <el-table-column label="租费" :align="'right'">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.invrecamtlYuan)" placement="top">
                            <span>{{ toThousands(scope.row.invamtl) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="租售比" :align="'right'" width="100">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>租售比</div>
                            <el-popover placement="bottom" :width="100" trigger="hover" content="月租费/销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.salesInvamtlMonth == '-' ? '-' : `${scope.row.salesInvamtlMonth}%` }}
                    </template>
                </el-table-column>

                <el-table-column prop="rentTypeDesc" label="租金架构" :align="'center'" width="120"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="cashType" label="销售设备" :align="'center'"
                    width="120"></el-table-column>

                <el-table-column label="超保销售额" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>超保销售额</div>
                            <el-popover placement="bottom" :width="150" trigger="hover" content="销售额-保底销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        <span :class="{ 'zs-text-red': scope.row.salesMonitoringFlag == '1' }">{{
                            toThousands(scope.row.salesFootfallAvgType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="超保比例" :align="'right'" width="100">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>超保比例</div>
                            <el-popover placement="bottom" :width="280" trigger="hover" content="（销售额-保底销售额）/保底销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.footfallYoySqmType == '-' ? '-' : `${scope.row.footfallYoySqmType}%` }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="扣点" :align="'right'">
                    <template #default="scope">
                        {{ scope.row.monitoringDiscountAnnualType == '-' ? '-' :
                            `${scope.row.monitoringDiscountAnnualType}%` }}
                    </template>
                </el-table-column>

                <el-table-column prop="passengerFlowEqu" label="客流设备" :align="'center'" width="120"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="客流量" :align="'right'" width="120">
                    <template #default="scope">
                        {{ toThousands(scope.row.passengerFlow) }}
                    </template>
                </el-table-column>

                <el-table-column prop="contractscode" label="合同编号" :align="'center'" width="120"></el-table-column>
                <el-table-column prop="contractStart" label="合同开始" :align="'center'" width="120"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="contractEnd" label="合同结束" :align="'center'"
                    width="120"></el-table-column>

                <el-table-column prop="operatingHours" label="营业时间" :align="'right'" width="120"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" min-width="160" :align="'left'"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="brandname" label="品牌名称" min-width="160" :align="'left'"
                    show-overflow-tooltip></el-table-column>

                <!-- <el-table-column label="保底销售" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>保底销售</div>
                            <el-popover placement="bottom" :width="100" trigger="hover" content="月租金/扣点">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ toThousands(scope.row.salesYoyType) }}
                    </template>
                </el-table-column> -->


                <!-- <el-table-column label="环比上月" :align="'right'" width="100">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>环比上月</div>
                            <el-popover placement="bottom" :width="300" trigger="hover" content="（日均销售-上月日均销售）/上月日均销售">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.datelabelMomAvgsales == '-' ? '-' : `${scope.row.datelabelMomAvgsales}%` }}
                    </template>
                </el-table-column> -->


            </el-table>
            <el-table :data="tableData" class="zs-table-page-main" :stripe="stripe" v-if="curTab == '年'">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 + curPageSize * (currentPage - 1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="theDate" label="日期" width="120" :align="'left'"></el-table-column>
                <el-table-column prop="shopNum" label="铺位编号" width="120" :align="'left'"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="netLeaseArea" label="租赁面积" width="120"
                    :align="'right'"></el-table-column>
                <el-table-column label="销售额" :align="'right'" width="120">
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.yearmonthSalesYuan)" placement="top">
                            <span>{{ toThousands(scope.row.salesVolume) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="月均销售" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>月均销售</div>
                            <el-popover placement="bottom" :width="300" trigger="hover" content="（销售额/经营天数）*30">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ toThousands(scope.row.salesFootfallAvgType) }}
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="同比上年" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>同比上年</div>
                            <el-popover placement="bottom" :width="300" trigger="hover" content="（销售额-去年销售额）/去年销售额">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.salesYoyType == '-' ? '-' : `${scope.row.salesYoyType}%` }}
                    </template>
                </el-table-column>
                <el-table-column label="月均坪效" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>月均坪效</div>
                            <el-popover placement="bottom" :width="380" trigger="hover" content="（销售额/经营天数*30）/年末起租面积">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ toThousands(scope.row.footfallYoySqmType) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="年租费" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.monitoringDiscountAnnualType) }}
                    </template>
                </el-table-column> -->
                <el-table-column label="租费" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>租费</div>
                            <el-popover placement="bottom" :width="300" trigger="hover" content="（年租费/经营天数）*30">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        <el-tooltip effect="dark" :content="toThousands(scope.row.invrecamtlYuan)" placement="top">
                            <span>{{ toThousands(scope.row.weekSalesRentalcost) }}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="租售比" :align="'right'" width="120">
                    <template #header>
                        <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-end">
                            <div>租售比</div>
                            <el-popover placement="bottom" :width="200" trigger="hover" content="月均租费/月均销售">
                                <template #reference>
                                    <i class="icon-i zs-text-gray zs-space-left-min"></i>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        {{ scope.row.datelabelMomAvgsales }}
                    </template>
                </el-table-column>
                <el-table-column prop="rentTypeDesc" label="租金架构" width="120" :align="'center'"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="cashType" label="销售设备" width="120"
                    :align="'center'"></el-table-column>
                <el-table-column prop="passengerFlowEqu" label="客流设备" width="120" :align="'center'"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" label="客流量" :align="'right'" width="120">
                    <template #default="scope">
                        {{ toThousands(scope.row.passengerFlow) }}
                    </template>
                </el-table-column>
                <el-table-column prop="contractscode" label="合同编号" :align="'center'" width="120"></el-table-column>
                <el-table-column prop="contractStart" label="合同开始" :align="'center'" width="120"></el-table-column>
                <el-table-column class-name="db-table-cell-border-right" prop="contractEnd" label="合同结束" :align="'center'"
                    width="120"></el-table-column>
                <el-table-column prop="operatingHours" label="营业时间" :align="'right'" width="120"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" min-width="160" :align="'left'"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="brandname" label="品牌名称" min-width="160" :align="'left'"
                    show-overflow-tooltip></el-table-column>
            </el-table>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '日'">*销售额：万元；客流量：人次</div>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '月'">
                *销售额，保底销售，超保销售，日均销售，月租费：万元；月坪效：元/㎡/月；客流量：人次</div>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top" v-if="curTab == '年'">
                *销售额，月均销售，年租费，月均租费：万元；月均坪效：元/㎡/月；客流量：人次</div>
            <div class="zs-space-top-sm zs-table-page-pagination">
                <el-pagination v-model:currentPage="currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes"
                    :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
<script setup>
import dbPublicApi from '@/api/dbPublic'
import detailApi from '@/api/Manage/Business/detailPages'
import { ElMessage } from 'element-plus'
import { dateFormat, toThousands } from '@/utils/number-util'
import { downloadNewFile } from "@/utils/publicUtils"
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
let store = useStore()
const stripe = ref(true)
const route = useRoute().query

let loading = ref(false)

let biProjectCode = ref(route.biProjectCode)
let brandname = ref(route.brandname)
// let contractscode = ref(route.contractscode)
let contractscode = ref([])
const curTime = route.curTime
const updateDate = route.updateDate
const tabPermi = route.tabPermi
let curTab = ref(route.curTab)
let startDate = ref('')
let endDate = ref('')
let startDateSelect = ref('') // 筛选项 开始日期
let endDateSelect = ref('') // 筛选项 结束日期
let valueFormat = ref('YYYY-MM-DD')
let pickerDate = ref('date')

let projectList = ref([])
let brandList = ref([]) // 品牌列表
let contractsCodeList = ref([]) // 合同编号列表

const getPorjectList = async () => {
    await dbPublicApi.queryProjectPcApi({ dataTime: updateDate, resourceKey: tabPermi }).then((res) => {
        if (res.data.code == 200) {
            projectList.value = res.data.data
        }
    })
}
// 获取品牌列表
const getBrandList = async () => {
    let start = isSelect.value ? startDateSelect.value : startDate.value
    let end = isSelect.value ? endDateSelect.value : endDate.value
    if (!start || !end) {
        return false
    }
    await detailApi.wholeBrandDownLevel3Api({ biProjectCode: biProjectCode.value, startTime: start, endTime: end, timeType: curTab.value }).then((res) => {
        if (res.data.code == 200) {
            brandList.value = res.data.data
            if (brandList.value.length > 0) {
                brandList.value.includes(brandname.value) ? '' : brandname.value = brandList.value[0]
            }
        }
    })
}
// 根据品牌 获取铺位编码 列表
const getContractList = async () => {
    await detailApi.bunkNumberDownApi({ biProjectCode: biProjectCode.value, brandName: brandname.value }).then((res) => {
        if (res.data.code == 200) {
            contractsCodeList.value = res.data.data
            contractscode.value = []
            // contractsCodeList.value.indexOf(contractscode.value) > -1 ? '' : contractscode.value = [contractsCodeList.value[0]]
        }
    })
}

const handleDownload = async () => {
    const fileName = `品牌${curTab.value}列表.xls`
    let fileData
    let start = isSelect.value ? startDateSelect.value : startDate.value
    let end = isSelect.value ? endDateSelect.value : endDate.value
    await detailApi.brandTypeExportApi({ biProjectCode: biProjectCode.value, brandName: brandname.value, contractscode: contractscode.value, startDate: start, endDate: end, dateFlag: curTab.value }).then(res => {
        fileData = res.data
    })
    downloadNewFile(fileData, fileName)
}

const changeProject = () => {
    getBrandList()
    getContractList()
}

const changeTab = async (value) => {
    loading.value = true
    curTab.value = value
    tableData.value = []
    if (curTab.value == '日') {
        startDate.value = dateFormat(new Date(new Date(updateDate).getTime() - 30 * 24 * 60 * 60 * 1000), 'YYYY-MM-DD')
        endDate.value = updateDate
        valueFormat.value = 'YYYY-MM-DD'
        pickerDate.value = 'date'
    }
    if (curTab.value == '月') {
        const year = new Date(updateDate).getFullYear() - 2
        const data = dateFormat(new Date(updateDate), 'YYYY-MM')
        startDate.value = data.replace(data.substring(0, 4), year)
        endDate.value = dateFormat(new Date(updateDate), 'YYYY-MM')
        valueFormat.value = 'YYYY-MM'
        pickerDate.value = 'month'
    }
    if (curTab.value == '年') {
        const year = new Date(updateDate).getFullYear() - 20
        startDate.value = year.toString()
        endDate.value = new Date(updateDate).getFullYear().toString()
        valueFormat.value = 'YYYY'
        pickerDate.value = 'year'
    }
    if (isSelect.value) {
        startDateSelect.value = isSelect.value ? startDate.value : ''
        endDateSelect.value = isSelect.value ? endDate.value : ''
    }
    // 重新获取品牌下拉选，并且置空
    // brandname.value = ''
    await getBrandList()

    getData()
}

// 分页
const curPageSizes = ref(store.state.uiPageSizes)
let curPageSize = ref(store.state.uiPageSizeDefault)
let currentPage = ref(1)
const total = ref(0)
const handleSizeChange = (val) => {
    curPageSize.value = val
    getList()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getList()
}

const tableData = ref([])
// 未选择日期组件时，使用url参数查询，选择了日期之后，使用页面选择的日期（ps: 为了默认进来显示出【开始日期】【结束日期】）
const isSelect = ref(false)
const changeDate = () => {
    isSelect.value = true
    getBrandList()
}
const getList = () => {
    if (isSelect.value && ((startDateSelect.value && !endDateSelect.value) || (!startDateSelect.value && endDateSelect.value))) {
        ElMessage({
            message: '请选择开始日期和结束日期',
            type: 'warning',
        })
        return false
    }
    let start = isSelect.value ? startDateSelect.value : startDate.value
    let end = isSelect.value ? endDateSelect.value : endDate.value
    loading.value = true
    detailApi.brandTypeListApi({ biProjectCode: biProjectCode.value, brandName: brandname.value, contractscode: contractscode.value, startDate: start, endDate: end, dateFlag: curTab.value, pageNo: currentPage.value, pageSize: curPageSize.value }).then((res) => {
        if (res.data.code == 200) {
            loading.value = false
            tableData.value = res.data.data.childList
            total.value = res.data.data.totalCount
        }
    })
}
const getData = () => {
    if (!brandname.value) {
        ElMessage({
            message: '请选择品牌',
            type: 'warning',
        })
        return false
    }
    currentPage.value = 1
    tableData.value = []
    total.value = 0
    getList()
}

const init = () => {
    if (curTab.value == '日') {
        startDate.value = dateFormat(new Date(new Date(curTime).getTime() - 30 * 24 * 60 * 60 * 1000), 'YYYY-MM-DD')
        endDate.value = curTime
        valueFormat.value = 'YYYY-MM-DD'
        pickerDate.value = 'date'
    }
    if (curTab.value == '月') {
        const year = new Date(curTime).getFullYear() - 2
        const data = dateFormat(new Date(curTime), 'YYYY-MM')
        startDate.value = data.replace(data.substring(0, 4), year)
        endDate.value = dateFormat(new Date(curTime), 'YYYY-MM')
        valueFormat.value = 'YYYY-MM'
        pickerDate.value = 'month'
    }
    if (curTab.value == '年') {
        const year = new Date(curTime).getFullYear() - 20
        startDate.value = year.toString()
        endDate.value = new Date(curTime).getFullYear().toString()
        valueFormat.value = 'YYYY'
        pickerDate.value = 'year'
    }
    getPorjectList()
    getBrandList()
    getContractList()
    getData()
}
init()
</script>
  
  
<style scoped lang="scss"></style>